<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>研究进程审核（学院科研室主任）</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
</head>
<style>
    .mbox {
        padding: 8px
    }

    .item img {
        height: 40px;
    }

    .btn {
        height: 30px;
    }

    .btn button {
        float: right;
    }

    .information {
        background: #e8f4fc;
        height: 30px;
        line-height: 30px;
    }
    .layui-form-label{
        width: 77px;
    }
    .openFile input[type=file]{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 18px;
        z-index: 99;
        opacity: 0;
    }
    .layui-table-cell .layui-form-checkbox[lay-skin=primary]{
        top: 5px;
    }
    .operationDiv {
        display: none;
        position: absolute;
        top: -50px;
        left: 5px;
        background: #fff;
        box-shadow: 0 0 5px 0 rgb(0, 0, 0);
        border-radius: 5px;
    }
    .divShow {
        position: relative;
    }
    .divShow:hover .operationDiv {
        display: block;
    }
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
</style>
<body>
<div class="mbox">
    <div class="item">
        <img src="../img/yeji.png" alt="" style="margin: 0 5px 0 20px;"> <span style="font-size: 22px;display: inline-block;vertical-align: middle;">研究进程审核（学院科研室主任）</span>
    </div>
    <hr class="layui-bg-blue">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0;">
        <ul class="layui-tab-title">
            <li class="layui-this">未审核</li>
            <li>通过</li>
            <li>退回</li>
            <li>不通过</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="btn">
                    <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0"><i
                            class="layui-icon layui-icon-upload-drag" style="background: #2b7fe0"></i>导出Excel
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm" id="moreCheck" style="background: #2b7fe0;margin-right: 20px"><i class="layui-icon layui-icon-addition"  style="vertical-align: inherit"></i>批量审核
                    </button>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs check" lay-event="check">审核</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate','element'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            element = layui.element
        element.on('tab(docDemoTabBrief)', function (data) {
            if (data.index == 0) {
                tableShow(1)
            } else if (data.index == 1) {
                tableShow(2)
            } else if (data.index == 2) {
                tableShow(3)
            } else if (data.index == 3) {
                tableShow(4)
            }
        });
        var tableIns=null
       function tableShow(trStatus) {
           tableIns=table.render({
               elem: '#test'
               , url: '/process/ResearchProcessExamine?trStatus='+trStatus
               , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
               , cols: [[
                   {type: 'checkbox'}
                   , {field: 'topicName', title: '项目名称'}
                   , {field: 'planName', title: '申报计划名称'}
                   , {field: 'participantName', title: '项目成员'}
                   , {field: 'userName', title: '负责人'}
                   , {field: 'trStatus', title: '状态',templet:function (d) {
                           if(d.trStatus=='1'){
                               return '待审批'
                           }else if(d.trStatus=='2'){
                               return '已批准'
                           }else if(d.trStatus=='3'){
                               return '未批准'
                           }else{
                               return ''
                           }
                       }}
                   , {title: '操作', toolbar: '#barDemo'}
               ]]
               , page: true,
               where:{
                   useFlag:true
               },
               parseData: function(res){ //res 即为原始返回的数据
                   return {
                       "code": 0, //解析接口状态
                       "count": res.totleNum, //解析数据长度
                       "data": res.obj //解析数据列表
                   };
               },
               done:function () {
                    if($('.layui-this').text()!='未审核'){
                        $('.check').hide()
                    }
               }
           });
       }
        tableShow(1)
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'check'){
                layer.open({
                    type: 1,
                    title: '审批',
                    btn: ['确定', '取消'],
                    area: ['20%', '30%'],
                    content: '<div class="layui-form" style="width: 70%;margin: 15px auto">' +
                        '<div class="layui-form-item">\n' +
                        ' <input type="radio" name="trStatus" value="2" title="通过" checked>' +
                        ' <input type="radio" name="trStatus" value="3" title="退回">'+
                        ' <input type="radio" name="trStatus" value="4" title="不通过">'+
                        '    </div>'+
                        '</div>',
                    success: function(){
                        form.render('radio')
                    },
                    yes: function (index) {
                        var trStatus=$('[name="trStatus"]:checked').val()
                        $.ajax({
                            url:'/process/updateRemakeStatus',
                            dataType:'json',
                            type:'post',
                            data:{ids:data.trId,trStatus:trStatus},
                            success:function(res){
                                if(res.flag){
                                    layer.msg('保存成功！',{icon:1});
                                }
                                layer.close(index)
                                tableIns.config.where._ = new Date().getTime();
                                tableIns.reload()
                            }
                        })
                    },
                });
            }else if(layEvent==='detail'){
                layer.open({
                    type: 1,
                    title: '查看',
                    shade: 0.5,
                    area: ['100%', '100%'],
                    content: '<div style="padding: 8px">' +
                            //
                            '<div style="margin-top: 15px">' +
                                '<h2 style="text-align: center">开题报告</h2>'+
                                '<div>'+(data.trOther ||'')+'</div>'+
                                function () {
                                    var trOtherStr = '';
                                    var attachmentList1 =data.attachmentList1
                                    if (!!attachmentList1 && attachmentList1.length > 0) {
                                        var str = '';

                                        attachmentList1.forEach(function(item){
                                            var attachName = item.attachName;
                                            var fileExtension=attachName.substring(attachName.lastIndexOf(".")+1,attachName.length);//截取附件文件后缀
                                            var attName = encodeURI(attachName).replace(/\+/g, "%2b").replace(/\@/g,"%40").replace(/#/g,"%23").replace(/\&/g,"%26").replace(/\//g,"%2F").replace(/\?/g,"%3F").replace(/\￥/g,"%ef%bf%a5").replace(/$/g,"%24").replace(/\！/g,"%ef%bc%81").replace(/\（/g,"%ef%bc%88").replace(/\）/g,"%ef%bc%89").replace(/\…/g,"%e2%80%a6%e2%80%a6");
                                            var fileExtensionName=attName.substring(0,attName.lastIndexOf("."));
                                            var attachmentUrl = item.attUrl;
                                            attachmentUrl = attachmentUrl.substring(0,attachmentUrl.lastIndexOf("ATTACHMENT_NAME="))+"ATTACHMENT_NAME="+fileExtensionName+"."+fileExtension; //处理附件名字

                                            fileExtension = fileExtension.toLowerCase();

                                            str+= '<div class="divShow"><a href="javascript:;" title="'+item.attachName+'" style="display: block; overflow: hidden;text-overflow: ellipsis;color: blue;">'+item.attachName+'</a>' +
                                                '<div class="operationDiv">'+function(){
                                                    if(fileExtension == 'pdf' || fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'txt') { //判断是否需要查阅
                                                        return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + encodeURI(attachmentUrl) + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                                    }else{
                                                        return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + attachmentUrl + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                                    }
                                                }()+
                                                '<a class="operation" style="display: block;padding: 0 5px 5px 5px;" href="/download?' + encodeURI(attachmentUrl) + '"><img src="/img/attachmentIcon/icon_down.png" style="margin-right: 5px;" alt="">下载</a>'
                                                +'</div>' +
                                                '</div>'
                                        });

                                        trOtherStr = '<div class="clearfix" style="margin: 15px 0px"><span style="width: 45px;float: left;">附件：</span><div style="float:left;width: calc(100% - (70px));">'+str+'</div></div>';
                                    }
                                    return trOtherStr
                                }()+
                            '</div>'+

                        //
                        '<div style="margin-top: 15px">' +
                        '<h2 style="text-align: center">中题报告</h2>'+
                        '<div>'+(data.trOther2 || '')+'</div>'+
                        function () {
                            var trOtherStr = '';
                            var attachmentList2 =data.attachmentList2
                            if (!!attachmentList2 && attachmentList2.length > 0) {
                                var str = '';

                                attachmentList2.forEach(function(item){
                                    var attachName = item.attachName;
                                    var fileExtension=attachName.substring(attachName.lastIndexOf(".")+1,attachName.length);//截取附件文件后缀
                                    var attName = encodeURI(attachName).replace(/\+/g, "%2b").replace(/\@/g,"%40").replace(/#/g,"%23").replace(/\&/g,"%26").replace(/\//g,"%2F").replace(/\?/g,"%3F").replace(/\￥/g,"%ef%bf%a5").replace(/$/g,"%24").replace(/\！/g,"%ef%bc%81").replace(/\（/g,"%ef%bc%88").replace(/\）/g,"%ef%bc%89").replace(/\…/g,"%e2%80%a6%e2%80%a6");
                                    var fileExtensionName=attName.substring(0,attName.lastIndexOf("."));
                                    var attachmentUrl = item.attUrl;
                                    attachmentUrl = attachmentUrl.substring(0,attachmentUrl.lastIndexOf("ATTACHMENT_NAME="))+"ATTACHMENT_NAME="+fileExtensionName+"."+fileExtension; //处理附件名字

                                    fileExtension = fileExtension.toLowerCase();

                                    str+= '<div class="divShow"><a href="javascript:;" title="'+item.attachName+'" style="display: block; overflow: hidden;text-overflow: ellipsis;color: blue;">'+item.attachName+'</a>' +
                                        '<div class="operationDiv">'+function(){
                                            if(fileExtension == 'pdf' || fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'txt') { //判断是否需要查阅
                                                return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + encodeURI(attachmentUrl) + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                            }else{
                                                return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + attachmentUrl + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                            }
                                        }()+
                                        '<a class="operation" style="display: block;padding: 0 5px 5px 5px;" href="/download?' + encodeURI(attachmentUrl) + '"><img src="/img/attachmentIcon/icon_down.png" style="margin-right: 5px;" alt="">下载</a>'
                                        +'</div>' +
                                        '</div>'
                                });

                                trOtherStr = '<div class="clearfix" style="margin: 15px 0px"><span style="width: 45px;float: left;">附件：</span><div style="float:left;width: calc(100% - (70px));">'+str+'</div></div>';
                            }
                            return trOtherStr
                        }()+
                        '</div>'+
                        '</div>',
                })
            }
        });

        //批量审核
        $('#moreCheck').click(function () {
            var checkStatus = table.checkStatus('test');
            if(!checkStatus.data.length){
                layer.msg('请至少选择一项！',{icon:0});
                return false
            }
            var trId=''
            checkStatus.data.forEach(function (v,i) {
                trId+=v.trId+','
            })
            layer.open({
                type: 1,
                title: '审批',
                btn: ['确定', '取消'],
                area: ['20%', '30%'],
                content: '<div class="layui-form" style="width: 70%;margin: 15px auto">' +
                    '<div class="layui-form-item">\n' +
                    ' <input type="radio" name="trStatus" value="2" title="通过" checked>' +
                    ' <input type="radio" name="trStatus" value="3" title="退回">'+
                    ' <input type="radio" name="trStatus" value="4" title="不通过">'+
                    '    </div>'+
                    '</div>',
                success: function(){
                    form.render('radio')
                },
                yes: function (index) {
                    var trStatus=$('[name="trStatus"]:checked').val()
                    $.ajax({
                        url:'/process/updateRemakeStatus',
                        dataType:'json',
                        type:'post',
                        data:{ids:trId,trStatus:trStatus},
                        success:function(res){
                            if(res.flag){
                                layer.msg('保存成功！',{icon:1});
                            }
                            layer.close(index)
                            tableIns.config.where._ = new Date().getTime();
                            tableIns.reload()
                        }
                    })
                },
            });
        })

        // 附件查阅
        $(document).on('click', '.yulan', function () {
            var url = $(this).attr('data-url');
            pdurl($.UrlGetRequest('?' + url), url);
        });
    });
</script>